<template>
  <div class="new-service">
    <div class="title" v-if="formInline.id">
        <h3>编辑服务信息</h3>
    </div>
    <div class="title" v-else>
        <h3>新增服务信息</h3>
    </div>
    <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        size="large"
        :rules="rules"
        ref="ruleFormRef"
        require-asterisk-position="right"
    >
        <p>居民信息</p>
        <el-form-item label="选择居民" prop="name">
            <el-select v-model="formInline.name" placeholder="请选择">
                <el-option label="李明明" value="李明明 " />
                <el-option label="王汉文" value="王汉文" />
                <el-option label="李进民" value="李进民" />
            </el-select>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="formInline.idCard" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
            <el-select v-model="formInline.sex" placeholder="请选择">
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
            </el-select>
        </el-form-item>
        <el-form-item label="出生年月" prop="birthday">
            <el-date-picker
                v-model="formInline.birthday"
                type="date"
                placeholder="请选择"
            />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
            <el-input v-model="formInline.phone" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="居住地" >
            <el-input v-model="formInline.address" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="居民标签" >
            <el-select v-model="formInline.resident" placeholder="请选择">
                <el-option label="慢病护理" value="慢病护理" />
                <el-option label="高血压" value="高血压" />
                <el-option label="高血糖" value="高血糖" />
            </el-select>
        </el-form-item>
        <!-- <el-form-item label="家庭成员">
            <el-input v-model="formInline.address" placeholder="请输入" />
        </el-form-item> -->
        <div class="hr"></div>
        <p>服务信息</p>
        <el-form-item label="服务编号">
            <el-input v-model="formInline.number" disabled />
        </el-form-item>
        <el-form-item label="服务机构" prop="mechanism">
            <el-select v-model="formInline.mechanism" placeholder="请选择">
                <el-option label="罗西社区服务中心" value="罗西社区服务中心" />
                <el-option label="天明社区服务中心" value="天明社区服务中心" />
                <el-option label="民进社区服务中心" value="民进社区服务中心" />
            </el-select>
        </el-form-item>
        <el-form-item label="服务团队" prop="team">
            <el-select v-model="formInline.team" placeholder="请选择">
                <el-option label="王皓团队" value="王皓团队" />
                <el-option label="胡曼团队" value="胡曼团队" />
                <el-option label="李维团队" value="李维团队" />
            </el-select>
        </el-form-item>
        <el-form-item label="服务医生" prop="doctor">
            <el-select v-model="formInline.doctor" placeholder="请选择">
                <el-option label="王皓" value="王皓" />
                <el-option label="胡曼" value="胡曼" />
                <el-option label="李维" value="李维" />
            </el-select>
        </el-form-item>
        <el-form-item label="服务包" prop="servicePackage">
            <el-select v-model="formInline.servicePackage" placeholder="请选择">
                <el-option label="基础包 ￥240" value="基础包" />
                <el-option label="老年基础包 ￥340" value="老年基础包" />
                <el-option label="慢性病护理包 ￥340" value="慢性病护理包" />
            </el-select>
        </el-form-item>
        <el-form-item label="服务项目" prop="serviceItems">
            <el-select v-model="formInline.serviceItems" placeholder="请选择">
                <el-option label="随访服务" value="随访服务" />
                <el-option label="血糖检测" value="血糖检测" />
                <el-option label="血压检测" value="血压检测" />
            </el-select>
        </el-form-item>
        <el-form-item label="服务地点" prop="place">
            <el-select v-model="formInline.place" placeholder="请选择">
                <el-option label="签约人家里" value="签约人家里" />
                <el-option label="机构门诊" value="机构门诊" />
            </el-select>
        </el-form-item>
        <el-form-item label="服务时间">
            <el-date-picker
                v-model="formInline.time"
                type="datetime"
                placeholder="请选择时间"
            />
        </el-form-item>
        <el-form-item label="服务备注">
            <el-input
                v-model="formInline.remarks"
                type="textarea"
                placeholder="请输入"
                resize="none"
            />
        </el-form-item>
        <div class="hr"></div>
        <el-form-item>
            <el-button type="primary" @click="onSubmit(ruleFormRef)" >提交审核</el-button>
            <el-button>返回</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
    import { reactive, ref, onMounted } from 'vue'
    import type { FormInstance, FormRules } from 'element-plus'
    import { ElMessage } from 'element-plus'
    import router from '../../router'
    import { addServiceUser, updateServiceUser,findServiceUser } from '../../api/service'
    import { Random } from 'mockjs';
    import dayjs from 'dayjs';

    const ruleFormRef = ref<FormInstance>()

    //表单数据
    let formInline = reactive({
        id: '',
        number: Random.id(),
        name: '',
        idCard: '',
        sex: '',
        birthday: '',
        phone: '',
        address: '',
        resident: '',
        mechanism: '',
        team: '',
        doctor: '',
        servicePackage: '',
        serviceItems: '',
        place: '',
        time: '',
        remarks: '',
        serviceStatus: '待审核'
    })

    //表单验证规则
    const rules = reactive<FormRules>({
        name: [
            { required: true, message: '此项为必填', trigger: 'blur' },
        ],
        idCard: [
            {
            required: true,
            message: '此项为必填',
            trigger: 'change',
            },
        ],
        sex: [
            {
            required: true,
            message: '此项为必填',
            trigger: 'change',
            },
        ],
        birthday: [
            {
            type: 'date',
            required: true,
            message: '此项为必填',
            trigger: 'change',
            },
        ],
        phone: [
            {
            required: true,
            message: '此项为必填',
            // trigger: 'change',
            },
        ],
        mechanism: [
            {
            required: true,
            message: '此项为必填',
            trigger: 'change',
            },
        ],
        team: [
            {
            required: true,
            message: '此项为必填',
            trigger: 'change',
            },
        ],
        doctor: [
            {
            required: true,
            message: '此项为必填',
            trigger: 'change',
            },
        ],
        servicePackage: [
            {
            required: true,
            message: '此项为必填',
            trigger: 'change',
            },
        ],
        serviceItems: [
            {
            required: true,
            message: '此项为必填',
            trigger: 'change',
            },
        ],
        place: [
            {
            required: true,
            message: '此项为必填',
            trigger: 'change',
            },
        ],
    })

    async function sreach() {
        const {id} = router.currentRoute.value.query
        console.log(id);
        
        if(!id){
            return
        }
        const result = await findServiceUser(id)
        console.log('查询结果：', result);
        Object.assign(formInline, result)
        console.log('回显：', formInline);
        
        // formInline = router.currentRoute.value.query
    }
    sreach()

    // 表单验证
    const onSubmit = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate(async (valid, fields) => {
            if (valid) {
                formInline.birthday = dayjs(formInline.birthday).format('YYYY-MM-DD')
                formInline.time = dayjs(formInline.time).format('YYYY-MM-DD HH:mm:ss')
                if(formInline.id){
                    const result = await updateServiceUser(formInline)
                    console.log('修改结果:', result);
                    if(result.status === 200) {
                        ElMessage({
                            message: result.message,
                            type: 'success'
                        })
                    }
                }else {
                    console.log('submit!', formInline)
                    const result = await addServiceUser(formInline)
                    if (result.status === 200) {
                        ElMessage({
                            message: result.message,
                            type: 'success',
                        })
                        router.push('/service/pending')
                    }
                }
            } else {
                console.log('error submit!', fields)
            }
        })
    }

    
</script>

<style lang="less" scoped>
    .new-service{
        background: #fff;
        padding: 20px;
        .title{
            padding-bottom: 25px;
            border-bottom: 1px #f2f7fb solid;
            h3{
                line-height: 20px;
                border-left: 6px #4d4dff solid;
                font-size: 18px;
                font-weight: normal;
                padding-left: 10px;
            }
        }
        p{
            font-size: 16px;
            line-height: 70px;
        }
        .hr{
            width: 100%;
            border-bottom: 1px #f2f7fb solid;
        }
        :deep(textarea){
            width: 576px;
            height: 120px;
        }
        button{
            margin-top: 20px;
        }
    }
</style>
